<!--
 * @Description: 灌区首页
-->

<template>
  <div id="irrigated-area-index">
    <a-card size="small" style="margin-bottom: 10px;">
      <template #title>
        <div class="title">
          <slot name="title"><InsertRowAboveOutlined :style="{ fontSize: '18px', color: token.colorPrimary }" /></slot>
          <span class="smart-margin-left10">{{ irrigationAreaName }}</span>
        </div>
      </template>
      <template #extra>
        <a-select v-model:value="value" style="width: 120px" @change="selectChage">
          <a-select-option v-for="item  in selectOptions" :name="item.name" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </template>
    </a-card>


    <!-- 灌区统计报表--第一行报表 -->
    <a-row :gutter="[10, 10]">

      <!-- 灌区用水指标 -->
      <a-col :span="24" :lg="8">
        <plannedWaterUse />
      </a-col>

      <!-- 基本信息 测流车 -->
      <a-col :span="24" :lg="8">
        <flowMeasurementVehicleInformation />
      </a-col>

      <!-- 实际用水 -->
      <a-col :span="24" :lg="8">
        <actualWaterUsage />
      </a-col>
      
    </a-row>

    <!-- 灌区统计报表--第二 行报表 -->
    <a-row :gutter="[10, 10]" style="margin-top: 10px;">
      <a-col :span="24" :lg="12">
        <monthlyWaterIntake />
      </a-col>

      <a-col :span="24" :lg="12">
        <waterQualityMonitoring />
      </a-col>
    </a-row>

  </div>
</template>
<script setup>
import { onMounted, computed, ref } from 'vue';
import { theme } from 'ant-design-vue';
import plannedWaterUse from './components/planned-waterUse.vue';
import flowMeasurementVehicleInformation from './components/flow-measurement-vehicle-information.vue';
import actualWaterUsage from './components/actual-water-usage.vue';
import monthlyWaterIntake from './components/monthly-water-intake.vue';
import waterQualityMonitoring from './components/water-quality-monitoring.vue';


const { useToken } = theme;
const { token } = useToken();
const color = computed(() => {
  return token.colorPrimary;
});

const irrigationAreaName = ref('')
const selectOptions = ref([
  {
    name: "曹店灌区",
    deptId: "1366665290871599105",
    id: 1,
  },
  {
    name: "麻湾灌区",
    deptId: "1366665609651286018",
    id: 2,
  },
  {
    name: "胜利灌区",
    deptId: "1366665385843224578",
    id: 3,
  },
  {
    name: "王庄灌区",
    deptId: "1366665518282567681",
    id: 4,
  },
  {
    name: "垦东灌区",
    deptId: "1399292657820016641",
    id: 5,
  },
  {
    name: "水务局",
    deptId: "1661675446061350914",
    id: 27,
  },
  {
    name: "丁字路灌区",
    deptId: "1694155650306170881",
    id: 28,
  },
]);
const value = ref('');

onMounted(() => {
    irrigationAreaName.value = selectOptions.value[0].name;
    value.value = selectOptions.value[0].id;
  });
// 灌区下拉选框变化
function selectChage(value,option) {
    irrigationAreaName.value = option.name;
}
</script>
  <style lang="less" scoped>
// @import './index.less';
#irrigated-area-index {
  padding: 10px 0;
  .title {
    display: flex;
    align-items: center;
    &::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 0;
      width: 3px;
      height: 30px;
      background-color: v-bind('token.colorPrimary');
    }
  }
}
</style>